<template>
	<div ref="echartsRef" class="echarts-container"></div>
</template>
<script setup name="ECharts">
import * as echarts from "echarts";
const props = defineProps({
	option: {
		type: Object,
		default: () => {
			return {};
		}
	}
});

const echartsRef = ref(null);
let echartsInstance = null;

watch(
	() => props.option,
	() => {
		init();
	},
	{ deep: true }
);

const init = () => {
	echartsInstance.clear();
	echartsInstance.setOption(props.option);
	window.addEventListener("resize", () => {
		echartsInstance.resize();
	});
};

onMounted(() => {
	nextTick(() => {
		echartsInstance = echarts.init(echartsRef.value);
		init();
	});
});
</script>
<style lang="scss" scoped>
.echarts-container {
	width: 100%;
	height: 100%;
	margin: 0 auto;
}
</style>
